| vue路由守卫 | 您所在的位置：网站首页 › close to 和next to › vue路由守卫 |
vue路由守卫
|
vue路由守卫 - 全局（router.beforeEach((to, from, next) =>来判断登录和路由跳转状态） vue中用路由守卫来做是否登陆判断，此处我以后台管理项目为例，如下图：
主要方法： to：进入到哪个路由去 from：从哪个路由离开 next：路由的控制参数，常用的有next(true)和next(false)首先判断进入的是否是login页面？然后再判断是否已经登陆？已经登陆了就进入你要跳转的页面，没登录就进入login页面 为了更加明显一点，我将页面命名的简单一些，ps： Login.vue是登陆页面 Index.vue是全局页面（包含公共导航组件）A.vue是普通页面（此处我做为首页）B.vue是普通页面 404.vue是走丢了的404页面 
//router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
const children = [
{
path: 'a',
name: 'a',
component: () => import('./views/A.vue'),
meta: {
title: 'a页面',
keepAlive: false // 无缓存
}
},
{
path: 'b',
name: 'b',
component: () => import('./views/B.vue'),
meta: {
title: 'b页面',
keepAlive: true // 有缓存
}
},
{
path: '404',
name: '404',
component: () => import('./components/404.vue')
}
];
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{ path: '/', redirect: '/a' },
{ path: '*', redirect: '/404' },
{
path: '/login',
name: 'login',
component: () => import('./components/Login.vue')
},
{
path: '/',
component: () => import('./components/Index.vue'), //index是上图左边的公共菜单
children //此处是站内页面，页面在右侧container里展示
}
]
});
router.beforeEach((to, from, next) => {
const isLogin = sessionStorage.getItem('isLogin'); //获取本地存储的登陆信息
if (to.name == 'login') { //判断是否进入的login页
if (isLogin == "true") { //判断是否登陆
next({ name: 'a'}); //已登录，跳转首页（a页面）
} else {
next(); //没登录，继续进入login页
}
} else { //如果进入的非login页
if (isLogin == "true") { //同样判断是否登陆
next(); //已登录，正常进入
} else {
next({ name: 'login'}); //没登录，跳转到login页
}
}
});
export default router;
代码实现
|
【本文地址】
公司简介
联系我们